<html>
<head>
		<script type="text/javascript" src='../libs/yahoo.js'></script>
		<script type="text/javascript" src='../libs/animation.js'></script>
		<script type="text/javascript" src='../libs/dom.js'></script>
		<script type="text/javascript" src='../libs/event.js'></script>
		<script type="text/javascript" src='../libs/dragdrop.js'></script>
		<script type="text/javascript" src='../libs/json.js'></script>
		<script type="text/javascript" src='../libs/yui-ext.js'></script>
		<script>
			YAHOO.namespace('alw.stuff')
			YAHOO.alw.stuff = {
				exdiv: null,
				init: function(){
					var xy = YAHOO.util.Dom.getXY('something');
					console.log('xy'+xy)
   					var x = xy[0];
   					var y = xy[1];
   					var w = this.offsetWidth;
   					
   					var attr = {
      					points: { 
         					to: xy, 
         					control: [ [x - 50, y], [x - 25, y] ]
      					}
   					};
 					 
   					var customElasticOut = function (t, b, c, d, a, p) {
      					var p=d*0.1; // override default period for more snap (default is p=d*0.3)
   						return YAHOO.util.Easing.elasticOut(t, b, c, d, a, p);
   					};
					
					
					console.log(attr)
					
					YAHOO.alw.stuff.exdiv = new YAHOO.ext.Actor('something', null, true);
					YAHOO.alw.stuff.exdiv.moveIn('top');
					YAHOO.alw.stuff.exdiv.bounce();
					//YAHOO.alw.stuff.exdiv.animate(attr,0.5,null,customElasticOut,YAHOO.util.Motion);
					YAHOO.alw.stuff.exdiv.animate({points: {to: [100,100], control: [[50,50],[0,0]]}}, 0.5,YAHOO.alw.stuff.onDone, customElasticOut, YAHOO.util.Motion)
					YAHOO.alw.stuff.exdiv.animate(attr, 0.5,YAHOO.alw.stuff.onDone, customElasticOut, YAHOO.util.Motion)
					//exdiv.play();
					YAHOO.util.Event.on('something','click',YAHOO.alw.stuff.doClick);
					
				},
				doClick: function(){
					console.log('doClick')
					YAHOO.alw.stuff.exdiv.play()
				},
				onDone: function(){
					console.log('done!')
				}
			
			}
			
			
			YAHOO.util.Event.on(window,'load',YAHOO.alw.stuff.init)
		
		</script>
		<style>
			#something{
				position: absolute;
				top: 100px;
				left: 100px;
				height: 200px;
				width: 200px;
				border: 1px solid red;
			}
		
		</style>
</head>
<body>
<div id='something'>something</div>

</body>

</html>